<template>
	<view class="content">
		<view class="m_header">
			<view class="user">
				<u-avatar size="104rpx" src="../../static/image/logo.jpg"
					style="box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.04)"></u-avatar>
				<view class="user_info">
					<view class="user_info_text">
						<view class="name">{{userInfo.userName?userInfo.userName:'游客'}}</view>
					</view>					
					<view class="action_bar">
						<u-icon style="margin-left: 30rpx;" name="../../static/image/m_top_set.svg" color="#333" bold size="32"
							@click="pageUrl('/mine/setting')">
						</u-icon>
					</view>
					</u-icon>
				</view>
			</view>
			<view class="user_bottom" >
				<view class="user_bottom_btn" @click="pageUrl('/mine/mySchool')">
					<u-icon name="../../static/image/m_collection.svg" color="#333" size="34" bold top='2'
						style="margin-right: 10rpx;"></u-icon>
					<text>我的学校</text>
				</view>
				<<view class="user_bottom_btn" @click="pageUrl('/mine/myClasses')">
					<u-icon name="../../static/image/m_synthesis.svg" color="#333" size="34" bold top='2'
						style="margin-right: 10rpx;"></u-icon>
					<text>我的班级</text>
				</view>
			</view>
		</view>
		<u-cell-group :border="false">
			<view class="cellgroudbox">
				<u-cell v-if="!userInfo.isTeacher" icon="../../static/image/m_wallet.svg" :border="false"
					:iconStyle="{width:'34rpx',height:'32rpx',marginRight:'20rpx'}"
					:titleStyle="{color:'#333',fontSize:'28rpx'}" title="我的缴费" rightIcon="arrow-right"
					:rightIconStyle="{fontSize:'28rpx',color:'#333'}" :isLink="true" @click="openWallet()">
				</u-cell>				
				<u-cell v-if="!userInfo.isTeacher" icon="../../static/image/mine_order.svg" :border="false"
					:iconStyle="{width:'34rpx',height:'38rpx',marginRight:'20rpx'}"
					:titleStyle="{color:'#333',fontSize:'28rpx'}" title="我的耗课" rightIcon="arrow-right"
					:rightIconStyle="{fontSize:'28rpx',color:'#333'}" :isLink="true" url="/pages/mine/order">
				</u-cell>
				<u-cell v-if="userInfo.isTeacher" icon="../../static/image/mine_order.svg" :border="false"
					:iconStyle="{width:'34rpx',height:'38rpx',marginRight:'20rpx'}"
					:titleStyle="{color:'#333',fontSize:'28rpx'}" title="学生耗课" rightIcon="arrow-right"
					:rightIconStyle="{fontSize:'28rpx',color:'#333'}" :isLink="true" url="/pages/mine/xsorder">
				</u-cell>
				<u-cell icon="../../static/image/set_user.svg" :border="false"
					:iconStyle="{width:'34rpx',height:'34rpx',marginRight:'20rpx'}"
					:titleStyle="{color:'#333',fontSize:'28rpx'}" title="实名认证" rightIcon="arrow-right"
					:rightIconStyle="{fontSize:'28rpx',color:'#333'}" :isLink="true" @click="isShowRealName()">
				</u-cell>
			</view>
			<view
				class="cellgroudbox">
				<u-cell icon="../../static/image/set_share.svg" :border="false"
					:iconStyle="{width:'34rpx',height:'36rpx',marginRight:'20rpx'}"
					:titleStyle="{color:'#333',fontSize:'28rpx'}" title="我的推广" rightIcon="arrow-right"
					:rightIconStyle="{fontSize:'28rpx',color:'#333'}" :isLink="true" url="/pages/mine/share">
				</u-cell>
				<u-cell icon="../../static/image/m_about.svg" :border="false"
					:iconStyle="{width:'34rpx',height:'34rpx',marginRight:'20rpx'}"
					:titleStyle="{color:'#333',fontSize:'28rpx'}" title="关于我们" rightIcon="arrow-right"
					:rightIconStyle="{fontSize:'28rpx',color:'#333'}" :isLink="true" @click="showAbout()">
				</u-cell>
			</view>
		</u-cell-group>
		<door-tabbar :active="2"></door-tabbar>
		<real-name-detail v-if="userInfo.isTeacher" :show="showRealName" @hide="hide()"></real-name-detail>
		<real-name v-else :show="showRealName" @hide="hide()"></real-name>
		<u-toast ref="uToast"></u-toast>
		<door-modal></door-modal>
	</view>
</template>

<script>
	import realName from './components/real_name'
	import realNameDetail from './components/real_name_detail'
	export default {
		components: {
			realName,
			realNameDetail
		},
		data() {
			return {
				showRealName: false,
				userInfo: {},
			};
		},
		onShow() {
			this.getUserInfo();			
		},
		methods: {
			jumpnotice(){
				uni.switchTab({
					url:'/pages/mine/noticeList'
				})
			},
			hide() {
				this.getUserInfo();
				this.showRealName = false;
			},
			//实名认证
			async isShowRealName() {
				this.showRealName = true
			},
			//关于我们
			showAbout() {
				this.$api.showModal({
					show: true,
					content: '关于我们',
					title: '关于我们',
					showCancelButton: false,
					success: res => {
						if (res.confirm) {
							console.log(res)
						}
					}
				})
			},
			async getUserInfo() {
				if (uni.getStorageSync('userInfo')) {
					this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));					
				}else {
					let userInfo = await this.$api.getUserInfo();
					if (userInfo) {
						this.userInfo = userInfo;
						uni.setStorageSync('userInfo', JSON.stringify(userInfo));						
					}
				}
			},
			pageUrl(url) {
				uni.navigateTo({
					url: `/pages${url}`
				})
			},
			openWallet() {
				this.pageUrl('/mine/pay')				
			}
		}
	}
</script>
<style lang="scss">
	.content {
		background-color: #fff !important;
		background-image: url('@/static/image/m_personal_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.action_bar {
		// width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		// padding: 40rpx 0;
	}
	.cellgroudbox {
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.04);
		background-color: #fff;
		padding: 16rpx;
		border-radius: 20rpx;
		margin-top: 24rpx;
	}

	.m_header {
		border: 0;

		.user {
			// background-image: url('@/static/image/m_bg.png');
			// border-radius: 30rpx;
			// background-repeat: no-repeat;
			// background-size: 100% 100%;
			width: 100%;

			display: flex;
			align-items: center;
			padding:0 40rpx;
			padding-bottom: 40rpx;
			// border-bottom: 1rpx solid #ccc;

			&_info {
				width: calc(100% - 28rpx);
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 28rpx;

				&_text {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.name {
						font-size: 28rpx;
						color: #333333;
						font-weight: 800;
						letter-spacing: 2rpx;
					}

					.code {
						font-size: 24rpx;
						color: #444444;
						display: flex;
						align-items: center;
					}
				}
			}

		}

		.user_bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 30rpx;
			margin-top: 30rpx;
			border-radius: 30rpx;

			&_btn {
				width: 48%;
				height: 84rpx;
				justify-content: center;
				// padding: 46rpx 70rpx;
				background-color: #fff;
				border-radius: 20rpx;
				color: #333;
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.04);
			}
		}
	}

	.btn_list {
		width: 100%;
		background: linear-gradient(45deg, #3C93A7, #3447B1);
		border-radius: 20rpx;
		padding: 28rpx 0 30rpx;
		margin: 58rpx 0 40rpx;

		.grid-text {
			font-size: 24rpx;
			font-weight: 400;
		}
	}

	.bottom_img {
		position: relative;
		width: 340rpx;
		height: 150rpx;
		left: 50%;
		transform: translateX(-50%);
		top: 140rpx;
		bottom: 20rpx;
		padding-bottom: 50rpx;
	}
	.heart-shake {
	   animation: submitBtn 3s ease infinite;
	 }
	 @keyframes submitBtn {
	   0%,100% {
	     transform: scale(1);
		  // transform: translateY(0);
	   }
	   50% {
	     transform: scale(1.05);
		 // transform: translateY(-0.3rem);
	   }
	 }
	/deep/ .u-avatar__image--square {
		border-radius: 20rpx;
	}

	/deep/ .u-cell {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
	}

	/deep/.u-cell__body {
		padding: 20rpx 0;
	}

	/deep/ .u-cell--clickable {
		background: transparent;
	}
</style>
